<!--
 * @Author       : tongzonghua
 * @Date         : 2020-10-26 19:10:27
 * @LastEditors  : tongzonghua
 * @LastEditTime : 2020-10-27 13:50:12
 * @Email        : tongzonghua@360.cn
 * @Description  : 
 * @FilePath     : /cli/aframe-boilerplate/index.html
-->
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Hello, World! - A-Frame</title>
  <meta name="description" content="Hello, World! - A-Frame">
  <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  <script src="./components/log.js"></script>
  <script src="./components/box.js"></script>
</head>

<body>
  <a-scene stats>
    <a-assets>
      <!-- <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg"> -->
      <!-- <img src="https://p5.ssl.qhimg.com/t0114f2783c8623a174.png" alt="" id="test"> -->
      <img id="skyTexture" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
      <!-- <img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg"> -->
      <!-- <video id="vdo" autoplay loop src="http://video.topgamers.cn/15777132180106280341_bit30.mp4"></video> -->
    </a-assets>
    <a-box id="testbox" log="event:'twEvent', message:'okokok" src="#boxTexture" position="0 2 -5" rotation="0 0 0" scale="2 2 2"
      scale-on-mouseenter="to: 2.2 2.2 2.2">
      <a-animation attribute="position" to="0 6.2 -5" direction="alternate" dur="2000" repeat="indefinite">
      </a-animation>
    </a-box>
    <a-box follow="target: #testbox; speed: 5;" src="#test" color="red" position="0 5 -5" rotation="0 0 0" scale="1 1 1"></a-box>
    <!-- <a-plane src="#groundTexture" rotation="-90 0 0" width="30" height="30"></a-plane> -->
    <a-sky src="#skyTexture"></a-sky>
    <!-- <a-sky src="#vdo"></a-sky> -->
    <!-- <a-light type="ambient" color="red"></a-light> -->
    <!-- <a-light type="point" intensity="2" position="2 4 4"></a-light> -->
  </a-scene>
</body>
<script>
  // const el = document.querySelector('a-box');
  // el.setAttribute('log',{event:'twEvent', message:'okokok'})
  // el.emit('anEvent')
  // el.removeAttribute('log')
  // el.emit('twEvent')
</script>
</html>